<template>
	<view class="content">
		<loadingPage v-show="loadingPage"></loadingPage>
		<page-meta :page-style="'overflow:'+(gameShow?'hidden':'visible')"></page-meta>
		<view class="form" v-show="!loadingPage">
			<view class="form-item">
				<view class="label">项目分类</view>
				<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between" @click="staticSePop(1)">
					<view class="value" v-if="!formData.game_name">请选择项目分类</view>
					<view class="pitchValue" v-else>{{formData.game_name}}</view>
					<image src="/static/index/sj1.png" mode="" class="img1"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">服务类型</view>
				<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between" @click="staticSePop(2)">
					<view class="value" v-if="!formData.play_type_name">请选择服务类型</view>
					<view class="pitchValue" v-else>{{formData.play_type_name}}</view>
					<image src="/static/index/sj1.png" mode="" class="img1"></image>
				</view>
			</view>
			<block v-for="(item,index) in tagsList" :key="index">
				<view class="form-item">
					<view class="label">{{item.name}}</view>
					<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between"
						@click="tagsClick(item,index)">
						<view class="value" v-if="!formData.tags[index]">请选择{{item.name}}</view>
						<view class="pitchValue" v-else>{{formData.tags[index].option}}</view>
						<image src="/static/index/sj1.png" mode="" class="img1"></image>
					</view>
				</view>
			</block>
			<!-- <view class="form-item" v-if="formData.is_up_field == 1">
				<view class="label">是否提供包上分服务</view>
				<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between" @click="staticSePop(3)">
					<view class="value" v-if="!formData.is_up_name">请选择是否提供包上分服务</view>
					<view class="pitchValue" v-else>{{formData.is_up_name}}</view>
					<image src="/static/index/sj1.png" mode="" class="img1"></image>
				</view>
			</view> -->
			<view class="form-item">
				<view class="label">价格</view>
				<view class="select border-bm tn-flex tn-flex-col-center">
					<input type="text" placeholder="请输入单价" placeholder-class="value" v-model="formData.price" />
				</view>
			</view>
			<view class="form-item padd-bm border-bm tn-flex tn-flex-row-between">
				<view class="label">单位</view>
				<view class="checkbox tn-flex">
					<block v-for="(item,index) in unitList" :key="index">
						<view class="checkbox-item tn-flex" @click="unitClick(index,item.name)">
							<image src="/static/index/pitchon1.png" v-if="formData.unitIndex == index" mode=""></image>
							<image src="/static/index/unselected.png" v-else mode=""></image>
							<text>{{item.name}}</text>
						</view>
					</block>
				</view>
			</view>
			<view class="form-item">
				<view class="label">接单时间</view>
				<view class="section  tn-flex tn-flex-col-center tn-flex-row-between">
					<view class="input" @click="timeShow = true">
						<text class="t1" v-if="formData.start_time == ''">请选择开始时间</text>
						<text class="t2" v-else>{{formData.start_time}}</text>
					</view>
					<view class="xian"></view>
					<view class="input" @click="endTimeShow = true">
						<text class="t1" v-if="formData.end_time == ''">请选择结束时间</text>
						<text class="t2" v-else>{{formData.end_time}}</text>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">个人简介</view>
				<view class="textarea">
					<textarea placeholder="请介绍您的服务特色、技术特长、个人风格等(不超过50个字)" placeholder-class="value"
						v-model="formData.introduce"></textarea>
				</view>
			</view>
			
			<view class="form-item">
				<view class="label">上传主页图片(5张)</view>
				<view class="voice tn-flex">
					<block v-for="(item,index) in formData.images" :key="index">
						<view class="uimg">
							<image :src="item" class="selectedImg" mode=""></image>
							<image src="/static/my/imgClose.png" class="imgClose" @click="delImg(index)" mode="">
							</image>
						</view>
					</block>
					<image src="@/static/uploading.png" v-if="formData.images.length < 5" @click="uploadImg"
						class="uimg" mode=""></image>
				</view>
			</view>
			<view class="btn" @click="submit">发布</view>
		</view>
		<!-- 游戏分类 服务类型 上分服务-->
		<tn-popup v-model="gameShow" mode="bottom">
			<picker-w @confirm="typeConfirm" :list="gamePopList" :selectPopTitle="selectPopTitle"
				keyName="name"></picker-w>
		</tn-popup>

		<!-- 动态表单下拉选择 -->
		<tn-popup v-model="tagsShow" mode="bottom">
			<picker-w @confirm="tagsPopConfirm" :list="tagsPopList" keyName="option"></picker-w>
		</tn-popup>

		<!-- 录音 -->
		<!-- #ifndef H5 -->
		<record-pop ref="recordPop" @endRecord="endRecord"></record-pop>
		<!-- #endif -->


		<!-- 时间 -->
		<tn-picker mode="time" :params="params" v-model="timeShow" @confirm="timeConfirm"></tn-picker>
		<tn-picker mode="time" :params="params" v-model="endTimeShow" @confirm="endTimeConfirm"></tn-picker>

		<permissionGuide ref="refPermissionGuide" />
	</view>
</template>

<script>
	import {
		host
	} from '@/siteinfo.js'
	let gameList = [] //游戏分类数据
	let playTypeList = [] //服务类型数据
	let gradeList = [{
		name: '是',
		id: 1
	}, {
		name: '否',
		id: 0
	}] //上分服务
	const innerAudioContext = uni.createInnerAudioContext();
	import {
		imgUploading
	} from "@/common/common.js"
	import permissionGuide from "@/components/permissionGuide/index.vue"
	export default {
		components: {
			permissionGuide
		},
		data() {
			return {
				selectPopTitle: '项目分类',
				gameShow: false,
				gamePopList: [], //弹窗显示数据
				tagsPopList: [], //弹窗动态表单数据
				tagsList: [], //动态表单
				tagsIndex: 0, //点击的哪个动态表单
				tagsShow: false,
				timeShow: false,
				endTimeShow: false,
				formData: {
					game_id: '', //游戏分类id
					game_name: '', //游戏分类名称
					play_type_id: '', //服务类型
					play_type_name: '', //服务类型
					is_up: '', //是否包上分
					is_up_field: '', // 是否显示上分服务
					is_up_name: '', //是否包上分
					price: '', //价格
					unit: '单', //单位
					unitIndex: 0,
					start_time: '', //开始时间
					end_time: '', //结束时间
					introduce: '', //介绍
					tags: [],
					voice: '',
					duration: 0,
					images: []
				},
				pAudioaState: false, //音频播放状态
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true
				},
				loadingPage: true,
				unitList: [{
						name: '单',
						value: 1
					},
					// {
					// 	name: '局',
					// 	value: 2
					// },
					{
						name: '小时',
						value: 3
					},
					{
						name: '天',
						value: 4
					}
				],
				type: 1,
				play_goods_id: 0

			}
		},
		async onLoad(option) {
			console.log(option)
			this.type = option.type
			this.play_goods_id = option.id
			// 监听音频播放
			innerAudioContext.onPlay(res => {
				this.pAudioaState = true
			})
			// 监听暂停
			innerAudioContext.onPause(res => {
				this.pAudioaState = false
			})
			// 自然停止
			innerAudioContext.onEnded(res => {
				this.pAudioaState = false
			})
			// 获取音频时长
			innerAudioContext.onCanplay(res => {
				// #ifndef MP
				this.formData.duration = Math.round(innerAudioContext.duration)
				// #endif


			})
			await this.getGame()
			await this.getPlayType()
			if (this.type == 2) {
				await this.getInfo()
			}
		},
		methods: {
			// 提交
			async submit() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: this.type == 1 ? '/api/play_goods/store' : '/api/play_goods/edit',
						data: {
							...this.formData,
							images: this.formData.images.toString()
						}
					})
					console.log(result)
					uni.showToast({
						title: result.data.msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 800)
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					})
					//TODO handle the exception
				}

			},
			// 获取游戏分类
			async getGame() {
				let result = await this.$request({
					loading: 0,
					method: 'post',
					url: '/api/play_game/game'
				})
				gameList = result.data.data

			},
			// 获取游戏标签
			async getTags(game_id) {
				let result = await this.$request({
					loading: 0,
					method: 'post',
					url: '/api/play_game/tags',
					data: {
						game_id
					}
				})
				this.tagsList = result.data.data


			},
			// 获取服务类型
			async getPlayType() {
				let result = await this.$request({
					loading: 0,
					method: 'post',
					url: '/api/play/play_type'
				})
				playTypeList = result.data.data
				if (this.type == 1) {
					this.loadingPage = false
				}
			},
			// 获取技能详情
			async getInfo() {
				let result = await this.$request({
					loading: 0,
					method: 'post',
					url: '/api/play_goods/info',
					data: {
						play_goods_id: this.play_goods_id
					}
				})
				let data = result.data.data
				// 处理图片显示
				if (data.images) {
					data.images = data.images.split(',')
				}
				// 处理音频显示
				if (data.voice) {
					console.log('data.voice')
					innerAudioContext.src = data.voice
				}
				// 处理单位显示
				let index = this.unitList.findIndex((res) => {
					return res.name == data.unit
				})
				this.formData.unitIndex = index

				if (data.is_up != 2) {
					// 处理是否包含上分服务显示
					this.formData.is_up_name = gradeList.filter(res => {
						return res.id == data.is_up
					})[0].name
					this.formData.is_up_field = 1
				}

				// 处理服务类型
				this.formData.play_type_name = playTypeList.filter(res => {
					return res.id == data.play_type_id
				})[0].name
				// 处理动态表单
				await this.getTags(data.game_id)
				if (data.goodsTags.length != 0) {
					data.goodsTags.forEach((res, index) => {
						let obj = {
							id: res.id,
							name: res.game_tags_name,
							option: res.game_tags_options
						}
						this.formData.tags[index] = obj
					})
				}


				this.formData = {
					...this.formData,
					...data
				}
				console.log(this.formData)
				this.loadingPage = false
			},
			// 点击动态表单选项
			tagsClick(item, index) {
				this.tagsPopList = item.options
				this.tagsIndex = index
				this.tagsShow = true

			},
			// 动态设置弹出层title
			staticSePop(type) {
				if (type == 1) {
					this.selectPopTitle = '项目分类'
					this.gamePopList = gameList
				} else if (type == 2) {
					this.selectPopTitle = '服务类型'
					this.gamePopList = playTypeList
				} else if (type == 3) {
					this.selectPopTitle = '上分服务'
					this.gamePopList = gradeList
				}
				this.gameShow = true
			},

			// 弹出录制音频音频弹窗
			start() {
				this.$refs['recordPop'].open()
			},
			// h5端选择音频上传
			audioUploading() {
				uni.chooseFile({
					count: 1,
					extension: ['.mp3'],
					success: (e) => {
						console.log(e)
						let filePath = e.tempFilePaths[0]
						this.upMp3Api(filePath)
					}
				})
			},
			// 选择单位
			unitClick(index, name) {
				this.formData.unitIndex = index
				this.formData.unit = name
			},
			// pop确认框(游戏分类 服务类型 上分服务)
			typeConfirm(e) {
				console.log(e)
				if (this.selectPopTitle == '项目分类') {
					this.formData.game_name = e.name
					this.formData.game_id = e.id
					this.formData.is_up_field = e.is_up_field
					if (e.is_up_field == 0) {
						this.formData.is_up = 2
					}
					this.getTags(e.id)
				} else if (this.selectPopTitle == '服务类型') {
					this.formData.play_type_name = e.name
					this.formData.play_type_id = e.id
				} else if (this.selectPopTitle == '上分服务') {
					this.formData.is_up_name = e.name
					this.formData.is_up = e.id
				}
				this.gameShow = false
			},
			// 动态表单
			tagsPopConfirm(e) {
				let data = this.tagsList[this.tagsIndex]
				let obj = {
					id: data.id,
					name: data.name,
					option: e.option
				}
				this.formData.tags[this.tagsIndex] = obj
				this.tagsShow = false

			},

			// 时间(start)
			timeConfirm(e) {
				let {

					hour,
					minute
				} = e
				this.formData.start_time = `${hour}:${minute}`
			},
			// 时间(end)
			endTimeConfirm(e) {
				let {

					hour,
					minute
				} = e
				this.formData.end_time = `${hour}:${minute}`
			},
			// 录音结束
			endRecord(e) {
				console.log()
				// #ifdef MP
				this.formData.duration = e.duration
				// #endif
				this.upMp3Api(e.tempFilePath)
			},
			// 上传录音
			upMp3Api(filePath) {
				uni.uploadFile({
					url: host + '/api/user/up_mp3',
					filePath,
					name: 'file',
					formData: {
						'token': uni.getStorageSync('token'),
					},
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data)
						this.formData.voice = data.data.file
						innerAudioContext.src = this.formData.voice

					}
				})
			},
			playAudio() {
				if (this.pAudioaState) {
					innerAudioContext.pause()
				} else {
					innerAudioContext.play()
				}

			},
			uploadImg() {
				uni.showActionSheet({
					itemList: ["相册照片", "拍照"],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.handleChooseImage("album");
						}
						if (res.tapIndex == 1) {
							this.handleChooseImage("camera");
						}
					}
				})
			},
			handleChooseImage(sourceType) {
				this.$uniApiBaseChooseImage({
					count: 5 - this.formData.images.length,
					sourceType: [sourceType],
				}).then((res) => {
					this.recursionUImg(res.tempFilePaths, 0)
				}).catch(error => {
					if (error.errMsg == "show-permision-guide") {
						this.$refs.refPermissionGuide.open({
							perName: sourceType
						})
					}
				})
			},
			// 删除图片
			delImg(index) {
				this.formData.images.splice(index, 1)
			},
			// 递归上传图片
			recursionUImg(tempFilePaths, index) {
				uni.showLoading({
					title: '上传中'
				});
				if (index == tempFilePaths.length || this.formData.images.length == 9) {
					console.log("所有图片上传完成");
					uni.hideLoading();
					return;
				}
				imgUploading(tempFilePaths[index]).then(res => {
					console.log("第" + (index + 1) + "张图片上传成功");
					this.formData.images.push(res.data.file)
					this.recursionUImg(tempFilePaths, index + 1);
				}).catch(err => {
					console.log("第" + (index + 1) + "张图片上传失败");
					uni.showModal({
						title: '提示',
						content: '上传失败了，可能图片太大导致，请重试'
					});
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		background: #ffffff;

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.3);
		}

		.border-bm {
			border-bottom: 1px solid #1E1F2E;
		}

		.padd-bm {
			padding-bottom: 44rpx;
		}

		.value {
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}

		.pitchValue {
			font-size: 32rpx;
			color: #333333;
		}

		.form {
			.form-item {
				margin-bottom: 40rpx;

				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}

				.ftitle {
					font-size: 24rpx;
					font-weight: 500;
					color: #333333ad;
					margin-top: 12rpx;
				}

				// 选择
				.select {
					height: 75rpx;

					.img1 {
						width: 32rpx;
						height: 18rpx;
					}

					input {
						flex: 1;
						color: #333333;
					}
				}


				.textarea {
					background-color: #efefef;
					border-radius: 20rpx;
					padding: 24rpx;
					margin-top: 28rpx;

					textarea {
						color: #333333;
						width: 100% !important;
					}
				}

				.checkbox {
					.checkbox-item {
						align-items: center;
						margin-left: 20rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}

						text {
							font-size: 28rpx;
							font-weight: 400;
							color: #333333ad;
							margin-left: 8rpx;
						}
					}
				}

				// 区间
				.section {
					margin-top: 28rpx;

					.input {
						width: 305rpx;
						height: 93rpx;
						background: #efefef;
						border-radius: 20rpx;
						font-size: 32rpx;
						font-weight: 400;

						padding-left: 32rpx;
						line-height: 93rpx;

						.t1 {
							color: #333333;
						}

						.t2 {
							color: #333333;
						}
					}

					.xian {
						width: 32rpx;
						height: 1px;
						background-color: #CCCCCC;
					}
				}

				.voice {
					margin-top: 28rpx;
					display: flex;
					flex-wrap: wrap;

					.img1 {
						width: 240rpx;
						height: 240rpx;
					}

					.uimg {
						width: 160rpx;
						height: 160rpx;
						position: relative;
						margin-right: 17rpx;
						margin-bottom: 17rpx;

						.selectedImg {
							width: 100%;
							height: 100%;
						}

						.imgClose {
							width: 49rpx;
							height: 46rpx;
							position: absolute;
							top: 0;
							right: 0;
						}
					}

					.voiceKuai {
						width: fit-content;
						height: 72rpx;
						background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
						border-radius: 45rpx;
						padding: 0 16rpx;
						margin-bottom: 16rpx;

						.play {
							width: 48rpx;
							height: 48rpx;
						}

						.playIcon {
							width: 133rpx;
							height: 44rpx;
							margin: 0 16rpx;
						}

						.op-animation {
							animation: identifier 0.5s infinite;
						}

						@keyframes identifier {
							0% {
								opacity: 0.8;
							}

							50% {
								opacity: 0.5;
							}

							100% {
								opacity: 0.3;
							}
						}

						.s {
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

					.reset-text {
						font-size: 24rpx;
						font-weight: 500;
						color: #CCCCCC;
						margin-left: 20rpx;
						text-decoration: underline;
					}
				}

			}

			.btn {
				height: 88rpx;
				background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
				border-radius: 20rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;

			}
		}


	}
</style>